/**
 * Created by Administrator on 2025/10/25.
 */

function Button1CallBack() {
    /*
        下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动
        持续时间2000ms
    */
    $("#p1").css("color", "red")
        .slideUp(2000)
        .slideDown(2000);
}

function Button2CallBack() {
    alert("Text: "+ $("#p2").text());
}

function Button3CallBack() {
    alert("Html: "+ $("#p2").html());
}


function Button4CallBack() {
    var text1="<p>文本-1。</p>";                                       // 使用 HTML 标签创建文本
    /*
         这行代码是使用 jQuery 创建并设置一个 <p> 段落元素
         具体解释如下：
            $("<p></p>")‌：使用 jQuery 创建一个新的 <p> 段落 HTML 元素
            .text("文本-2。")‌：为这个新创建的段落元素设置文本内容为"文本-2。"

    */
    var text2=$("<p></p>").text("文本-2。");                                  // 使用 jQuery 创建文本
    var text3=document.createElement("p");
    text3.innerHTML="文本-3。";                                               // 使用 DOM 创建文本 text with DOM
    $("body").prepend(text1,text2,text3);
}


function ReadyCallBack() {
    $("#btn1").click(Button1CallBack);
    $("#btn2").click(Button2CallBack);
    $("#btn3").click(Button3CallBack);
}







/*
 因为下面的代码要执行，所以所以后面添加了 ;
*/
$(document).ready(ReadyCallBack);


/*
    $("p").click 是 jQuery 中的一个方法，用于为所有 <p> 段落元素绑定点击事件处理函数
    当用户点击页面上任意段落时，就会触发绑定的函数执行相应操作
    该方法有两种主要使用方式：
        ‌绑定事件‌：$("p").click(function(){ $(this).hide(); }) 会在点击段落时隐藏该段落
        ‌触发事件‌：直接调用 $("p").click() 可以主动触发已绑定的点击事件
    与 on() 方法相比，click() 只能为已存在的元素绑定事件，而 on() 通过事件委托可以处理
    动态创建的元素。随着 jQuery 版本升级，推荐使用 on() 方法来绑定点击事件
    在实际使用中，通常会将点击事件绑定代码放在 $(document).ready() 函数中，确保 DOM 加载完成后再执行绑定操作

    jQuery 就是 query(查询) 然后 action(操作)

    jQuery 语法
        jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
        基础语法： $(selector).action()
            美元符号定义 jQuery
            选择符（selector）"查询"和"查找" HTML 元素
            jQuery 的 action() 执行对元素的操作

        实例:
            $(this).hide()              - 隐藏当前元素
            $("p").hide()               - 隐藏所有 <p> 元素                        这里相当于标签选择器
            $("p.test").hide()          - 隐藏所有 class="test" 的 <p> 元素        这里相当于类  选择器
            $("#test").hide()           - 隐藏 id="test" 的元素                    这里相当于ID  选择器
        上面的选择器语法和CSS里面的选择器语法差不多

        $(document).ready(function(){
            // 开始写 jQuery 代码...
        });
        上面的代码和下面的代码功能相同
        $(function(){
             // 开始写 jQuery 代码...
        });

        jQuery里面的选择器都以美元符号开头: $()
        first表示选择第一个元素
        first-child  选取每个 <ul> 元素的第一个 <li> 元素
        :even 选取偶数位置的
        :odd  选取奇数位置的

     当您向 jQuery 传递 DOM 对象时，jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象。
     jQuery 函数会返回新的 jQuery 对象，其中的 ready() 是一个方法。
     由于在 JavaScript 中函数就是变量，因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法

    jQuery 拥有可操作 HTML 元素和属性的强大方法
    jQuery DOM 操作
    jQuery 中非常重要的部分，就是操作 DOM 的能力。
    jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易

        三个简单实用的用于 DOM 操作的 jQuery 方法：
            text() - 设置或返回所选元素的文本内容
            html() - 设置或返回所选元素的内容（包括 HTML 标签）
            val()  - 设置或返回表单字段的值

    通过 jQuery，可以很容易地添加新元素/内容。
        添加新的 HTML 内容
        我们将学习用于添加新内容的四个 jQuery 方法：
            append()    - 在被选元素的结尾(是内容的结尾)插入内容
            prepend()   - 在被选元素的开头(是内容的开头)插入内容
            after()     - 在被选元素之后插入内容
            before()    - 在被选元素之前插入内容
*/
